<template>
<div>
  <el-upload
          class="upload-demo"
          :action="qnUpUrl"
          :show-file-list="false"
          :data="imgData"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          >
          <img v-if="avatar" :src="qnDomainUrl+ avatar" class="avatar">
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
         <!-- <el-button size="small" type="primary">点击上传</el-button> -->
         </div>
</template>

<script>
import { getUptoken } from "@/service/common";
export default {
  props: {
    avatar: {
      type: String
    },
    size:{
      type:Number,
      default:1
    }
  },
  data() {
    return {
      imgData: {
        token: ""
      },
      qnUpUrl: process.env.qnUpUrl,
      qnDomainUrl: process.env.qnDomainUrl,
      
    };
  },
  mounted() {
    this.uptoken()
  },
  created(){
  },
  computed(){
  },
  beforeDestroy() {},
  methods: {
    async uptoken() {
      try {
        // const key = {key:""};
        // if(this.temp.avatar){
        //   key.key=this.temp.avatar
        // }
        const result = await getUptoken();
        if ((result.data.code = 2000)) {
          this.imgData.token = result.data.uptoken;
        //   console.log(this.imgData.token);
        //   console.log(this.qnUpUrl);
        } else {
          console.log(result);
        }
      } catch (err) {
        console.log(err);
      }
    },
    handleAvatarSuccess(res, file) {
    //   console.log(res);
    //   console.log(file);
      if (res.key) {
        // console.log(this.avatar);
        // console.log(res.key);
        // this.avatar=res.key;
        this.$emit("newavt",res.key);
        // console.log(this.temp);
      } else {
        this.$message.error("上传图片失败！");
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt = file.size / 1024 / 1024 < this.size;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt) {
        this.$message.error("上传头像图片大小不能超过 "+this.size+"MB!");
      }
      return isJPG && isLt;
    }
  }
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 250px;
  height: 250px;
  display: block;
}
</style>